<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0;
			}

			.grandPa {
				position: relative;
				width: 300px;
				height: 300px;
				top: 100px;
				left: 100px;
				background-color: gray;
			}

			.parent {
				position: absolute;
				height: 260px;
				width: 260px;
				top: 20px;
				left: 20px;
				background-color: #008CFF;
			}

			.son {
				height: 100px;
				width: 100px;
				margin-left: 80px;
				margin-top: 80px;
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		<div class="grandPa">
			<div class="parent">
				<div class="son"></div>
			</div>
		</div>
		<script type="text/javascript">
			var son = document.getElementsByClassName('son')[0];
			
			son.addEventListener('mousemove', function(e) {
				var x = e.pageX - getElemDocPosition(this).left;
				var y = e.pageY - getElemDocPosition(this).top;
				this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
			})
			// etElemDocPosition(son);
			function getElemDocPosition(el) {
				var parent = el.offsetParent,
					offsetLeft = el.offsetLeft,
					offsetTop = el.offsetTop;

				while (parent) {
					offsetLeft += parent.offsetLeft;
					offsetTop += parent.offsetTop;
					parent = parent.offsetParent;
				}

				return {
					left: offsetLeft,
					top: offsetTop
				}
			}
		</script>
	</body>
</html>
